<template>
<div class="content profile">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left" v-link="{path: '/user', replace: true}">
    <span class="icon icon-left"></span>
    </a>
    <h1 class="title">step3-资料补全</h1>
  <div class="list-block">
        <validator name="validation1">
    <ul style="margin-top:.5rem;">
      <li>
        <div class="item-content">
            <div class="item-inner">
                <div class="item-title label">姓名</div>
                <div class="item-input">
                    <input @invalid="infoInvalid" v-validate:name="['required']" detect-change="off" initial='off' id="name" type="text"  v-model='user.name'  placeholder="姓名">
		</div>
            </div>
        </div>
      </li>
      <li>
        <div class="item-content">
            <div class="item-inner">
                <div class="item-title label">邮箱</div>
                <div class="item-input">
                    <input  @invalid="emailInvalid" v-validate:email="['email']" detect-change="off" initial='off' id="email" type="text"  v-model='user.email' placeholder="邮箱" >
		</div>
            </div>
        </div>
      </li>
      <li>
        <div class="item-content">
            <div class="item-inner">
                <div class="item-title label">电话</div>
                <div class="item-input">
                    <input @invalid="phoneInvalid" v-validate:tel="['tel']" detect-change="off" initial='off' type="text"  v-model='user.phone' placeholder="电话" >
                </div>

            </div>
        </div>
      </li>
      <li>
        <div class="item-content">
            <div class="item-inner">
                <div class="item-title label">年级</div>
                <div class="item-input">
                    <select v-model='user.grade'>
                        <option  value='0'>大一</option>
                        <option value='1'>大二</option>
			<option value='2'>大三</option>
                        <option value='3'>大四</option>
                    </select>
                </div>
            </div>
        </div>
      </li>
      <li>
          <div class="item-content">
              <div class="item-inner">
                  <div class="item-title label">学校</div>
                  <div class="item-input">
                      <input @invalid="infoInvalid" v-validate:school="['required']" detect-change="off" initial='off'  type="text"  v-model='user.school' placeholder="学校">
                  </div>
              </div>
          </div>
      </li>
        <li>
          <div class="item-content">
              <div class="item-inner">
                  <div class="item-title label">专业</div>
                  <div class="item-input">
                      <input @invalid="infoInvalid" v-validate:major="['required']" detect-change="off" initial='off'  type="text" v-model='user.major' placeholder="专业">
		  </div>
              </div>
          </div>
      </li>
        <li>
          <div class="item-content">
              <div class="item-inner">
                  <div class="item-title label">地址</div>
                  <div class="item-input">
                      <input @invalid="infoInvalid" v-validate:address="['required']" detect-change="off" initial='off'  type="text" v-model='user.address' placeholder="地址">
		  </div>
              </div>
          </div>
      </li>
    </ul>
    <div class="submit-button">
        <div class="col-100"><a class="button button-big  button-success" style="background:#4cd964;color:white;border:none;" v-if="$validation1.valid" @click="submitInfo">保存</a></div>
  </div>
  </validator>
  </div>
</div>
</template>

<script>
import validator from '../../validation'
import $ from 'zepto'
export default {
  route: {
    data () {
      this.$http.get(this.apiUrl1 + $.sign.uid).
      then(function (response) {
        this.$set('user', response.json().user)
      })
    }
  },
  data () {
    return {
      apiUrl1: 'http://creatgo.com/oec/member?method=userinfo&uid=',
      apiUrl2: 'http://creatgo.com/oec/member?method=edituser',
      user: {}
    }
  },
  components: {
    validator
  },
  methods: {
    phoneInvalid () {
      $.toast('手机号码错误')
    },
    emailInvalid () {
      $.toast('邮箱格式错误')
    },
    infoInvalid () {
      $.toast('不能为空')
    },
    submitInfo () {
      console.log('submit....')
      this.$http.post(this.apiUrl2, this.user).
      then(function (response) {
        if (response.json().ok) {
          $.toast('会员升级成功')
          $.user = this.user
          setTimeout(function () {
            location.href = 'http://creatgo.com/oec/#!/user'
          }, 1000)
        }
      })
    }
  }
}
</script>
<style>
.profile .list-block {
  margin: 2.4rem 0 1rem 0;
  font-size: .65rem;
}
.profile .list-block .item-subtitle {
  font-size: .65rem;
}
.profile .list-block .item-input {
  margin-top: .06rem;
  margin-bottom: .06rem;
}
.profile .list-block input {
  font-size: .65rem;
}
.profile .list-block select {
  font-size: .65rem;
}
.profile .list-block textarea {
  font-size: .65rem;
}
.profile .list-block .item-title.label  {
  width: 30%;
}
.profile .submit-button {
  margin: 0 auto 2rem auto;
  width: 100%;
  padding: 0 .45rem;
}
.profile .submit-button button {
  background-color: #19b586;
  width: 100%;
  line-height: 2.1rem !important;
  height: 2.1rem !important;
}
</style>
